<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>卡号列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.param.cardNumber" placeholder="卡号" class="handle-input mr10"></el-input>
                <!-- <el-input v-model="query.param.contactPhone" placeholder="状态" class="handle-input mr10"></el-input>  -->
                <!-- 搜索按钮 -->
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <!-- 预约列表 -->
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="60" align="center" prop="id"></el-table-column>

                <el-table-column prop="cardNumber" label="卡片号码" align="center"
                                 :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        {{scope.row.cardStatus === 0 ? '未激活' : ''}}
                        {{scope.row.cardStatus === 1 ? '未使用' : ''}}
                        {{scope.row.cardStatus === 2 ? '已使用' : ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center"
                                 :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间" align="center"
                                 :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="操作" align="center" width="245">
                    <template slot-scope="scope">
                        <el-button
                                v-if="scope.row.cardStatus === 2"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >查看使用信息
                        </el-button>
                        <el-button
                                v-if="scope.row.cardStatus != 0 "
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdits(scope.$index, scope.row)"
                        >查看激活信息
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 页码功能 -->
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <el-dialog :title="title" :visible.sync="editVisible" width="88%">
            <el-form ref="form" :model="form" label-width="70px">
                <h3>去程</h3>
                <el-form-item label="交通工具" label-width="150px">
                    <el-select placeholder="请选择" v-model="form.goTravelTool">
                        <el-option
                                v-for="item in travleType"
                                :key="item.type"
                                :label="item.name"
                                :value="item.type">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车次/航次" label-width="150px">
                    <el-input v-model="form.goTravleNumber" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="出发时间" label-width="150px">
                    <el-input v-model="form.goDepTime" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="到达时间" label-width="150px">
                    <el-input v-model="form.goArrTime" placeholder=""></el-input>
                </el-form-item>
                <h3>返程</h3>
                <el-form-item label="交通工具" label-width="150px">
                    <el-select placeholder="请选择" v-model="form.returnTravelTool">
                        <el-option
                                v-for="item in travleType"
                                :key="item.type"
                                :label="item.name"
                                :value="item.type">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车次/航次" label-width="150px">
                    <el-input v-model="form.returnTravleNumber" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="出发时间" label-width="150px">
                    <el-input v-model="form.returnDepTime" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="到达时间" label-width="150px">
                    <el-input v-model="form.returnArrTime" placeholder=""></el-input>
                </el-form-item>
                <h3>联系人</h3>
                <el-form-item label="联系人" label-width="150px">
                    <el-input v-model="form.contactName" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="联系电话" label-width="150px">
                    <el-input v-model="form.contactPhone" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="150px">
                    <el-input v-model="form.contactEmail" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="紧急联系人" label-width="150px">
                    <el-input v-model="form.contactSupplyPhone" placeholder=""></el-input>
                </el-form-item>
                <el-table
                        :data="form.person"
                        border
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column prop="name" label="姓名" align="center"
                                     :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="phone" label="联系电话" align="center"
                                     :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="certificateType" label="证件类型"  align="center" >
                        <template slot-scope="scope">
                            {{scope.row.certificateType == "NI" ? '身份证' : ''}}
                            {{scope.row.certificateType == "PP" ? '护照' : ''}}
                            {{scope.row.certificateType == "OT" ? '其他' : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="certificateNumber" label="证件号" align="center"
                                     :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="gender" label="性别"  align="center" >
                        <template slot-scope="scope">
                            {{scope.row.gender == "O" ? '未知' : ''}}
                            {{scope.row.gender == "M" ? '男' : ''}}
                            {{scope.row.gender == "F" ? '女' : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="birthday" label="生日" align="center"
                                     :show-overflow-tooltip="true"></el-table-column>
                </el-table>
            </el-form>
        </el-dialog>
        <!-- 激活信息 -->
        <el-dialog :title="title" :visible.sync="information" width="88%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="卡片号码" label-width="150px">
                    <el-input v-model="form.cardNumber" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="出行人姓名" label-width="150px">
                    <el-input v-model="form.name" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="电话" label-width="150px">
                    <el-input v-model="form.phone" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="证件类型" label-width="150px">
                    <el-select placeholder="请选择" v-model="form.certificateType">
                        <el-option
                                v-for="item in certificateType"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号" label-width="150px">
                    <el-input v-model="form.certificateNumber" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="生日" label-width="150px">
                    <el-input v-model="form.birthday" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="150px">
                    <el-select placeholder="请选择" v-model="form.gender">
                        <el-option
                                v-for="item in gender"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="information = false">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<!-- 功能实现 -->
<script>
    import md5 from 'js-md5';
    // 富文本
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import { quillEditor } from 'vue-quill-editor';
    import { uploadsrc } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
    import { dynamicHeader } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';

    export default {
        name: 'basetable',
        data() {
            return {
                query: {
                    pageNum: 1,
                    pageSize: 10,
                    param: {
                        orderDetailId: '',
                        goTravelTool: '',
                        cardNumber: '',
                        contactPhone: ''
                    }
                },
                tableData: [],
                pageTotal: 0,
                title: '',
                editVisible: false,
                information:false,
                form: {},
                certificateType:[{
                    id:"NI",
                    name:"身份证",
                },{
                    id:"PP",
                    name:"护照",
                },{
                    id:"OT",
                    name:"其他",
                }],
                gender:[{
                    id:"O",
                    name:"未知"
                },{
                    id:"M",
                    name:"男"
                },{
                    id:"F",
                    name:"女"
                }],
                travleType: [{
                    type: 1,
                    name: '飞机'
                }, {
                    type: 2,
                    name: '火车'
                }, {
                    type: 3,
                    name: '汽车'
                }, {
                    type: 4,
                    name: '自驾'
                }, {
                    type: 5,
                    name: '其他'
                }]
            };
        },
        created() {
            this.tablist();
        },
        methods: {
            //商品展示
            tablist() {
                cardnumberList(this.query).then(res => {
                    if (res.returnCode == 200) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = null;
                        this.pageTotal = 0;
                    }
                });
            },
            handleEdit(index, row) {
                this.title = '详情';
                this.idx = index;
                this.form={},
                this.operation(row.orderDetailId);
            },
            handleEdits(index, row){
                this.title = '激活信息';
                this.idx = index;
                this.form={},
                this.activationinformation(row.cardNumber);
            },
            activationinformation(cardNumber){
                activationInformation(cardNumber).then(res =>{
                    if (res.returnCode == 200) {
                        var row = res.data;
                        this.form = row;
                        this.information=true;
                    }else{
                        this.$message.success(`数据不存在`);
                    }
                })
            },
            operation(orderDetailId) {
                cardnumberDetails(orderDetailId).then(res => {
                    if (res.returnCode == 200) {
                        var row = res.data;
                        this.form = row;
                        this.editVisible = true;
                    } else {
                        this.$message.success(`数据不存在`);
                    }
                });
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageNum', 1);
                this.tablist();
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageNum', val);
                this.tablist();
            }
        }
    };
</script>
<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>
